<template>
  <div class="my-filter-content">
    <div class="my-fc-search">
      <div class="my-fc-search-top">
        <vxe-input
          v-model="demo1.option.data.sVal"
          placeholder="支多条件过滤"
          style="color: rgba(49, 150, 154, 0.1)"
        >
          <template #prefix>
            <span class="iconfont icon-sousuo"></span>
          </template>
        </vxe-input>
      </div>
      <div class="my-fc-search-content">
        <template v-if="demo1.valList.length">
          <ul class="my-fc-search-list my-fc-search-list-head">
            <li class="my-fc-search-item selectAll">
              <vxe-checkbox v-model="checkall" @change="changeAllEvent">全选</vxe-checkbox>
              <div class="sortWrap">
                <div class="nameSort" :class="{ active: sortData.name }" @click="sort('name')">
                  名称
                  <i v-if="sortData.name !== 'down'" class="iconfont icon-mingcheng" />
                  <i v-else class="iconfont icon-jishu" />
                </div>
                <div class="nameSort" :class="{ active: sortData.count }" @click="sort('count')">
                  计数
                  <i v-if="sortData.count !== 'down'" class="iconfont icon-mingcheng" />
                  <i v-else class="iconfont icon-jishu" />
                </div>
              </div>
            </li>
          </ul>
          <ul class="my-fc-search-list my-fc-search-list-body">
            <li class="my-fc-search-item" v-for="item in searchList" :key="item.key">
              <vxe-checkbox v-model="item.checked">{{ item.value }}({{ item.count }})</vxe-checkbox>
            </li>
          </ul>
        </template>
        <template v-else>
          <div class="my-fc-search-empty">无匹配项</div>
        </template>
      </div>
    </div>
    <div class="my-fc-footer">
      <vxe-button size="small" @click="resetFilterEvent">重置</vxe-button>
      <vxe-button size="small" status="primary" @click="confirmFilterEvent">确认</vxe-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive } from 'vue';
import type { VxeGlobalRendererHandles } from 'vxe-table';
import XEUtils from 'xe-utils';
import { useMainStore } from '@/stores/main';

const props = defineProps<{
  params: PropType<VxeGlobalRendererHandles.RenderFilterParams>;
}>();

interface ColValItem {
  checked: boolean;
  value: string;
  count: number;
  key: number;
}

const store = useMainStore();
const sortData = ref<{
  name: '' | 'up' | 'down';
  count: '' | 'up' | 'down';
}>({ name: '', count: '' });

const demo1 = reactive({
  isAll: false,
  option: null as any,
  colValList: [] as ColValItem[],
  valList: [] as ColValItem[],
});

const checkall = computed(() => {
  return searchList.value.every(item => item.checked === true);
});

const searchList = computed(() => {
  const { option, valList } = demo1;
  
  if (option) {
    const data = option.data?.sVal
      ? valList.filter(
          val =>
            val.value.toString().toLowerCase().indexOf(`${option.data.sVal}`.toLowerCase()) > -1
        )
      : valList;
    if (sortData.value.name) {
      data.sort((a: ColValItem, b: ColValItem) => {
        return sortData.value.name == 'up'
          ? a.value.localeCompare(b.value)
          : b.value.localeCompare(a.value);
      });
    }
    if (sortData.value.count) {
      data.sort((a: ColValItem, b: ColValItem) => {
        return sortData.value.count == 'up' ? a.count - b.count : b.count - a.count;
      });
    }
    if (!sortData.value.name && !sortData.value.count) {
      data.sort((a: ColValItem, b: ColValItem) => {
        return a.key - b.key;
      });
    }
    return data;
  }
  return [];
});

const sort = (key: 'name' | 'count') => {
  const action = sortData.value[key];
  sortData.value[key] = action === '' ? 'up' : action === 'up' ? 'down' : '';
};

const load = () => {
  const { params } = props;
  if (params) {
    const { $table, column } = params;
    const { fullData } = $table.getTableData();
    const option = column.filters[0];
    const { vals } = option.data;
    const data = XEUtils.groupBy(fullData, column.field);
    const colValList = Object.keys(data).map((val, index) => {
      return {
        checked: vals.includes(val),
        value: val,
        count: data[val].length || 0,
        key: index,
      } as ColValItem;
    });
    demo1.option = option;
    demo1.colValList = colValList;
    demo1.valList = colValList;
  }
};

const searchEvent = () => {
  const { option, colValList } = demo1;
  if (option) {
    demo1.valList = option.data.sVal
      ? colValList.filter(item => item.value.indexOf(option.data.sVal) > -1)
      : colValList;
  }
};

const changeAllEvent = checked => {
  console.log(checked);
  searchList.value.forEach(item => {
    item.checked = checked.value;
  });
};

const confirmFilterEvent = () => {
  const { params } = props;
  const { option, valList } = demo1;
  if (params && option) {
    const { data } = option;
    const { $panel } = params;
    data.vals = valList.filter(item => item.checked).map(item => item.value);
    if (option.data.vals.length) {
      $panel.changeOption(null, true, option);
      $panel.confirmFilter();
    } else {
      $panel.resetFilter();
    }
  }
};

const resetFilterEvent = () => {
  const { params } = props;
  if (params) {
    const { $panel } = params;
    $panel.resetFilter();
  }
};

watch(
  () => demo1.valList,
  () => {
    // confirmFilterEvent();
  },
  {
    deep: true,
  }
);

load();
</script>

<style lang="less" scoped>
.my-filter-content {
  //  padding: 10px;
  min-width: 200px;
  user-select: none;
}
.my-filter-content .my-fc-search .my-fc-search-top {
  position: relative;
  padding: 5px 0;
}
.my-filter-content .my-fc-search .my-fc-search-top > input {
  border: 1px solid #ababab;
  padding: 0 20px 0 2px;
  width: 200px;
  height: 22px;
  line-height: 22px;
}
.my-filter-content .my-fc-search .my-fc-search-content {
  padding: 2px 0px;
}
.my-filter-content .my-fc-search-empty {
  text-align: center;
  padding: 20px 0;
}
.my-filter-content .my-fc-search-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.my-filter-content .my-fc-search-list-body {
  overflow-y: auto;
  height: 120px;
}

.my-filter-content .my-fc-search-list .my-fc-search-item {
  padding: 2px 0;
  display: block;
  &:hover {
    background-color: rgba(0, 0, 0, 0.06);
  }
}
.selectAll {
  display: flex !important;
  justify-content: space-between;
  padding-bottom: 8px !important;
  margin-bottom: 8px;
  border-bottom: 1px solid #d9d9d9;
  .sortWrap {
    display: flex;
    .nameSort {
      margin-left: 5px;
      color: #999;
      font-size: 12px;
      cursor: pointer;
      i {
        font-size: 8px;
        letter-spacing: 0px;
      }
    }
    .active {
      color: #31969a;
    }
  }
}
.my-filter-content .my-fc-footer {
  text-align: right;
  padding: 10px;
}
.my-filter-content .my-fc-footer button {
  padding: 0 15px;
  margin-left: 15px;
}
</style>
